<template>
  <section>
    <el-button @click="changeHeight">改变高度</el-button>
    <el-table ref="table" :data="visibleList" :height="height" border  size="mini">
      <el-table-column prop="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
    </el-table>
  </section>
</template>
   
  <script>
export default {
  name: "SelfTable",
  data() {
    return {
      list: [],
      visibleList: [],
      itemHeight: 48,
      totalHeight: 0,
      scrollTop: 0,
      debounce: false,
      height:'300px'
    };
  },
  created() {
    for (var i = 0; i < 100; i++) {
      this.list.push({
        index: i,
        name: "lby",
      });
      this.totalHeight += this.itemHeight;
    }
  },
  watch: {
    scrollTop: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          const start = Math.floor(val / this.itemHeight);
          this.visibleList = this.list.slice(start, start + 20);
          this.top = start * this.itemHeight;
          this.$refs.table.$el.getElementsByClassName(
            "el-table__body"
          )[0].style.top = `${start * this.itemHeight}px`;
        });
      },
    },
  },
  mounted() {
    this.$refs.table.bodyWrapper.addEventListener("scroll", (e) => {
      if (this.debounce) return;
      this.debounce = true;
      this.scrollTop = e.target.scrollTop;
      setTimeout(() => {
        this.debounce = false;
      }, 50);
    });
  },
  methods:{
    changeHeight(){
        this.height =  200 + Math.ceil(Math.random()*200) +'px'
    }
  }
};
</script>
   
  <style lang="css">
.el-table__body-wrapper {
  overflow-y: auto;
}
.el-table__body {
  position: absolute;
}
</style>
  